import React, {Component} from 'react';
import axios from 'axios';
import { RouteComponentProps } from "react-router-dom";

interface IItem{
    filmId:number,
    name:string
}

export default class App extends Component<RouteComponentProps, any> {
    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=6874970',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"1640782700594797135921153","bc":"440100"}',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then(res => {
            console.log(res.data.data.films)
            this.setState({
                list: res.data.data.films
            })
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.list.map((item:IItem) =>
                        <li key={item.filmId} onClick={() => {
                            console.log(this.props.history)
                            this.props.history.push(`/detail/${item.filmId}`)
                        }}>{item.name}</li>)
                }
            </div>
        );
    }
}